import React, { Component } from "react";
import { Form, Input, Button, Row, Col, DatePicker,Select, Modal } from "antd";
import Content from "../../components/Content";
import moment from "moment";

const { Item } = Form;
const { Option } = Select;

class ManageAddForm extends Component {
  constructor(props) {
    super(props);
  }

  state = {
    value: 1,
    newData: {}
  };

  handleSave = () => {
    this.state.newData.id = moment(new Date()).format('HHmmssSSS');

    const url = global.api.managementAdd;
    return global.network.post(url, this.state.newData)
    .then(res => {  
      Modal.success({
        content: '保存成功!',
      });
    })
    .catch(err => {
      Modal.error({
        content: '保存出错!',
      });
    })       
  }

  onSubmit = evt => {
    evt.preventDefault();
    const { onSubmit } = this.props;
    onSubmit && onSubmit();
  };

  render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      }
    };

    return (
      <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
        <Item label="筛选方法编号">
          <Input onChange={e => this.state.newData.m_id  = e.target.value } />
        </Item>
        <Item label="筛选方法名称">
          <Input onChange={e => this.state.newData.m_name  = e.target.value } />
        </Item>
        <Item label="筛选方法简介">
          <Input onChange={e => this.state.newData.m_jj  = e.target.value } />
        </Item>
        <Item label="筛选靶点">
          <Input onChange={e => this.state.newData.m_sxbd  = e.target.value } />
        </Item>
        <Item label="药理活性类型">
          <Select
            mode="tags"
            style={{ width: "100%" }}
            onChange={value => this.state.newData.m_type  = value[0]}
            tokenSeparators={[","]}
            showArrow={true}
          >
            <Option value="kxjhx">抗细菌活性</Option>
            <Option value="kzjhx">抗真菌活性</Option>
            <Option value="kbdhx">抗病毒活性</Option>
          </Select>
        </Item>
        <Item label="创建时间" >
          <DatePicker
             format="YYYY-MM-DD HH:mm:ss"
            onChange={(value, dateString) => this.state.newData.m_time = dateString}
            style={{width:'100%'}}
            dateRender={current => {
              const style = {};
              if (current.date() === 1) {
                style.border = "1px solid #1890ff";
                style.borderRadius = "50%";
              }
              return (
                <div className="ant-calendar-date" style={style}>
                  {current.date()}
                </div>
              );
            }}
          />
        </Item>
        <Item label="创建者">
          <Input onChange={e => this.state.newData.m_person = e.target.value } />
        </Item>
        <Item wrapperCol={{ span: 10, offset:3 }}>
          <Row guuter={16}>
            <Col span={5}>
              <Button type="primary" htmlType="submit" onClick={this.handleSave}>
                保存
              </Button>
            </Col>
          </Row>
        </Item>
      </Form>
    );
  }
}
const WrapperedManageAddForm = Form.create({
  name: "add acquisition"
})(ManageAddForm);

class ManageAdd extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedManageAddForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default ManageAdd;
